<template>
  <el-select
    style="width: 80px;margin-right: 10px;"
    @change="handleChange"
    @mousedown.native="handleMousedown"
    v-model="selected"
    placeholder="请选择"
  >
    <el-option
      v-for="(item, index) in menus"
      :key="index"
      :label="item.label"
      :value="item.code"
    />
  </el-select>
</template>
<script lang="ts" >
import { getCurrentInstance, onMounted, reactive, ref ,defineComponent,toRefs, watchEffect } from "vue";

export default defineComponent({
  props: {
    row: {
      type: Object,
      default: () => {},
    },
    editor: {
      type: Object,
      default: () => {},
    },
  },
  name: "backColor",
  setup(props, { emit }) {
    const state = reactive({
      selected: 14,
      menus: [
        {
          code: 12,
          label: "12px",
        },
        {
          code: 14,
          label: "14px",
        },
        {
          code: 15,
          label: "15px",
        },
        {
          code: 16,
          label: "16px",
        },
        {
          code: 18,
          label: "18px",
        },
        {
          code: 20,
          label: "20px",
        },
        {
          code: 24,
          label: "24px",
        },
      ],
    });
    const { proxy } = getCurrentInstance() as any;

    const handleChange = () => {
      props.editor
        .chain()
        .focus()
        .setFontSize(`${state.selected}px`)
        .run();
        props.editor.commands.focus()
    };

    const handleMousedown = () => {
      emit("mousedown", { });
    };

    return {
      ...toRefs(state),
      handleChange,
      handleMousedown,
    };
  },
});
</script>
